<template>
	<view class="container">
		
		<!-- 底部背景色 -->
		<view class="indexbg" :style="{backgroundImage: 'url('+ $util.img('image/point_bg.png') +')'}"></view>
		
		<!-- 顶部导航栏 -->
		<u-navbar
		     title="我的积分"
		     @rightClick="goBack"
		     :autoBack="true"
		     :placeholder="true"
		     bgColor="transparent"
		     leftIconColor="#333333"
		 >
		 </u-navbar>
		
		<view class="yue rel">
		  <view class="font-26 c-base flex-y-center">
		    <text class="m-r-10">我的积分</text>
		  </view>
		  <view class="font-48 text-bold c-base">{{point}}</view>
		  <image :src="$util.img('/image/point_1.png')" mode="" class="point2"></image>
		</view>
		
		<view class="text-bold flex-y-center rel font-30">
			<text class="line"></text>
			积分明细
		</view>
		
		<view class="record boxPanel rel" v-for="(item,index) in list" :key="index">
		  <view class="flex-x-between">
		    <view class="text-bold">{{ item.type_name }}</view>
		    <view class="text-bold font-32 color-title2" v-if="item.account_data > 0">+{{ parseFloat(item.account_data) }}</view>
			<view class="text-bold font-32 c-origin" v-else>{{ parseFloat(item.account_data) }}</view>
		  </view>
		  <view class="flex-x-between">
		    <view class="c-8d">{{ $util.timeStampTurnTime(item.create_time) }}</view>
		  </view>
		</view>

		<emptyData :width="empty.width" :height="empty.height" :text="empty.text" :icon="empty.icon" :marginTop="empty.marginTop" v-if="list.length == 0"></emptyData>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//分页数据
				list:[],
				page: 1,
				point: 0,
				empty: {
					width: 135,
					height: 134,
					text: '暂无数据',
					icon: '/image/emptyAddress.png',
					marginTop: 100
				},
			}
		},
		onLoad(e) {
		  if(uni.getStorageSync('userInfo')) {
		    this.point = uni.getStorageSync('userInfo').point
		  }
		  this.getList()
		},
		onReachBottom() {
		  this.page++
		  this.getList()
		},
		methods: {
			goBack() {
				// 判断路由是否有上一页，如果有则返回上一页，否则返回到首页
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				}else {
					this.$util.redirectTo('/pages/index/index')
				}
			},
			getList() {
			  
			  this.$api.sendRequest({
			      url: "/api/memberaccount/page",
			      data: {
			        page: this.page,
					page_size: 20,
			        account_type: 'point',
			      },
			      success: res => {
			        if(res.code == 0) {
			         if(this.page == 1) this.list = []
			         this.list = [...this.list, ...res.data.list]
			         
			        } 
			      }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
// 全局统一顶部背景色
.indexbg {  
  position: absolute;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 596rpx;
}

.yue {
  margin: 24rpx;
  padding: 40rpx;
  background: $color-title2;
  border-radius: 20rpx;
  .point2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 266rpx;
    height: 247rpx;
  }
}

.line {
	display: inline-block;
	width: 7rpx;
	height: 30rpx;
	border-radius: 0 10rpx 10rpx 0;
	background: $color-title2;
	margin-right: 18rpx;
}

</style>
